<template>
  <div class="page">
    <!-- 改变上方窗口得颜色 -->
    <div :class="{header:true,scroll:isScrollTop}">
      <div class="classify-icon" @click="$router.push('/goods/classify')"></div>
      <div class="search-wrap" @click="searchShow.show=true">
        <div class="search-icon"></div>
        <div class="text">请输入宝贝名称</div>
      </div>
      <div class="login" v-if="!isLogin" @click="$router.push('/login')">登录</div>
      <div class="my-icon" v-else @click="$router.push('/my')"></div>
    </div>
    <!-- 轮播图，先进行占位 -->
    <div class="banner-wrap">
        <div class="swiper-container" ref="swiper-container">
            <!-- 因为需要获取DOM，所以放在mounted中 -->
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,index) in swipers" :key="index">
                    <img :src="item.image" alt /></div>
            </div>
            <!-- 因为需要获取DOM，所以放在mounted中 -->
            <div class="swiper-pagination" ref="swiper-pagination"></div>
        </div>
    </div>
    <!-- 导航区域 -->
    <div class="quick-nav">
      <ul class="item" v-for="(item,index) in navs" :key="index" @click="$router.push('/goods/classify/item?cid='+item.cid)">
        <li>
            <!-- data-echo存储真正的路径 src存储真正的图片 -->
          <img src="../../../assets/images/common/lazyImg.jpg" :data-echo="item.image" />
        </li>
        <li>{{ item.title }}</li>
      </ul>
    </div>
    <!-- 潮流区域 -->
    <template v-for="(item,index) in goods">
        <div class="goods-main" :key="index" v-if="(index+1)%2 !==0">
            <!-- 此时的color-0是为了for循环，为索引 -->
            <div :class="'classify-name color-'+index">—— {{ item.title }} ——</div>
            <!-- 第一行 -->
            <div class="goods-row-1">
                <!-- 潮流左侧区域 -->
                <!-- 需要通过gid来获取内容，通过接口返回 -->
                <div class="goods-column" @click="$router.push('/goods/details?gid='+(item.items && item.items[0].gid))">
                <!-- 此处会出现一个问题，就是获取数组下标位置的时候可能会显示undefind 异步的问题,解决方式：三目判断一下
                    如果存在那么正常执行，如果不存在，返回一个空字符串

                    面试题：如果不想用三目运算符中的否则：怎么解决？
                    回答：使用&&，一样可以，如果第一个没问题，就执行第一个
                -->
                <div class="goods-title">{{ item.items && item.items[0].title}}</div>
                <div class="goods-tip">精品打折</div>
                <div :class="'goods-price bg-color-'+index">{{ item.items && item.items[0].price}}元</div>
                <div class="goods-image">
                    <img src="../../../assets/images/common/lazyImg.jpg" :data-echo="item.items && item.items[0].image" :alt="item.items && item.items[0].title" />
                </div>
                </div>
                <!-- 潮流右侧区域 -->
                <div class="goods-column">
                    <!-- 为什么要用拆分，如果不拆分的话，会把所有的都循环出来，影响性能，所以设置取值范围
                        而此处为什么不用三目判断了，因为是for循环，不是单个索引，所以就不用再次判断了
                     -->
                    <div class="goods-list" v-for="(item2,index2) in item.items.slice(1,3)" :key="index2" 
                    @click="$router.push('/goods/details?gid='+(item2.gid))">
                        <div class="goods-list-title">{{ item2.title }}</div>
                        <div class="goods-list-tip">品质精挑</div>
                        <div class="goods-list-image">
                            <img src="../../../assets/images/common/lazyImg.jpg" :data-echo="item2.image" alt="item2.title" />
                        </div>
                    </div>
                </div>
            </div>
            <!-- 潮流女装下面第二部分区域 -->
            <div class="goods-row-2">
                <div class="goods-list" v-for="(item2,index2) in item.items.slice(3,7)" :key="index2" 
                @click="$router.push('/goods/details?gid='+(item2.gid))">
                <div class="goods-title">{{ item2.title }}</div>
                <div class="goods-image">
                    <img src="../../../assets/images/common/lazyImg.jpg" :data-echo="item2.image" alt />
                </div>
                <div class="price">￥{{ item2.price }}</div>
                <div class="price line">￥{{ item2.price*2 }}</div>
                </div>
            </div>
        </div>
    <div class="goods-main" :key="index" v-else>
      <!-- 此时的color-0是为了for循环，为索引 -->
      <div class="classify-name color-1">—— {{ item.title }} ——</div>
      <!-- 第一行 -->
      <div class="goods-row-1">
        <!-- 潮流左侧区域 -->
        <div class="goods-column-2" v-for="(item2,index2) in item.items.slice(0,2)" :key="index2" 
        @click="$router.push('/goods/details?gid='+(item2.gid))">
          <div class="goods-title">{{ item2.title }}</div>
          <div class="goods-tip">火爆开售</div>
          <div class="goods-image">
            <img src="../../../assets/images/common/lazyImg.jpg" :data-echo="item2.image" alt />
          </div>
        </div>
      </div>
      <!-- 潮流女装下面第二部分区域 -->
      <div class="goods-row-2">
        <div class="goods-list" v-for="(item2,index2) in item.items.slice(2,6)" :key="index2" 
        @click="$router.push('/goods/details?gid='+(item2.gid))">
          <div class="goods-title">{{ item2.title }}</div>
          <div class="goods-image">
            <img src="../../../assets/images/common/lazyImg.jpg" :data-echo="item2.image" alt />
          </div>
          <div class="price">￥{{ item2.price }}</div>
          <div class="price line">￥{{ item2.price*2 }}</div>
        </div>
      </div>
    </div>
    </template>
   
    <!-- 个人推荐 -->
    <div class="goods-recom-nav">
      <div class="line"></div>
      <div class="recom-wrap">
        <div class="icon"></div>
        <div class="text">为您推荐</div>
      </div>
      <div class="line"></div>
    </div>
    <!-- 个人推荐里的内容 -->
    <div class="goods-recom">
      <div class="goods-list" v-for="(item,index) in recom" :key="index" @click="$router.push('/goods/details?gid='+(item.gid))">
        <div class="goods-image">
          <img src="../../../assets/images/common/lazyImg.jpg" :data-echo="item.image" alt="item.title" />
        </div>
        <div class="goods-title">{{ item.title }}</div>
        <div class="goods-price">￥{{ item.price }}</div>
      </div>
    </div>
    <!-- 这是父组件，那么子组件需要接收值 ,但是此时传过来的值不想以子组件给父组件传值的方式来实现，想优化一下
      解决方案：通过引用类型来改变，让彼此的内存地址指向同一个地址
    -->
    <my-search :show="searchShow"></my-search>
  </div>
</template>

<script>
import {mapActions,mapState} from 'vuex';
import Swiper from "../../../assets/js/libs/swiper";
import MySearch from '../../../components/search/index'
export default {
  name: "index",
  data() {
    return {
      isScrollTop: false,
      searchShow:{show:false} 
    };
  },
  components:{
        MySearch
  },
  created() {
    //进行监听事件，来获取当滚到什么程度得时候需要改变颜色,eventScrollTop此时是一个方法
    //vue监听滚动事件(scrollTop)
    this.isScroll = true;
    window.addEventListener("scroll", this.eventScrollTop);
    /*
    往前台页面渲染的时候会出现图片上去了，但是轮播不了，那是因为需要先获取具体的张数图片，之后在进行判断渲染，不能先进行
    判断在进行渲染，因为程序无法判断有几个照片，所以会出现这个情况，解决方法就是通过设置回调函数，让Swiper添加到异步操作中
    */
    this.getSwiper({success:()=>{
        //$nextTick:延迟获取DOM，在下次DOM更新循环结束后，执行延迟回调，在修改数据之后立即使用这个方法获取更新之后的DOM
        this.$nextTick(()=>{
            new Swiper(this.$refs['swiper-container'], {
            autoplay: 2000,//可选选项，自动滑动
            pagination : this.$refs['swiper-pagination'],
            paginationClickable :true,
            autoplayDisableOnInteraction : false,
            loop: true, //无限轮播
            })
        })
    }});
    //通过回调函数来进行调用
    //设置this.$nextTick是解决在可视区中不显示而需要滚动才显示的问题
    this.getNavs({success:()=>{
         this.$nextTick(()=>{
            this.$utils.lazyImg();
         })
    }});
    this.getGoods({success:()=>{
         this.$nextTick(()=>{
            this.$utils.lazyImg();
         })
    }});
    this.getRecomGoods({success:()=>{
         this.$nextTick(()=>{
            this.$utils.lazyImg();
         })
    }});
  },
  mounted(){
    
  },
  computed:{
      ...mapState({
          swipers:(state)=>state.index.swipers,
          navs:(state)=>state.index.navs, 
          goods:(state)=>state.index.goods,
          recom:(state)=>state.index.recom,
          isLogin:state=>state.user.isLogin,      
      })
  },
  methods: {
      //异步的辅助函数，可以省去了store.dispatch 
      ...mapActions({
          getSwiper:"index/getSwiper",
          getNavs:"index/getNavs",
          getGoods:"index/getGoods",
          getRecomGoods:"index/getRecomGoods"
      }),
    eventScrollTop() {
      //进行浏览器兼容性处理,先兼容IE以及safar
      let scrollTop =
        document.body.scrollTop || document.documentElement.scrollTop;
        //  console.log(scrollTop);
      /*
            进行判断是为了性能优化，如果直接改变颜色得话，滚动事件依旧会往下继续计算，会影响性能，为了避免，进行判断
            如果滚动值达到了设置的标准之后，直接改变，之后在改为false，也就只执行了一次，就不在继续执行了，但是会出现第二次失效的
            问题，所以需要再次判断一下，如果没达到的话，那么继续还是之前的样子，达到了之后改变，同样只执行一次
            */
      if (scrollTop >= 150) {
        if (this.isScroll) {
          this.isScrollTop = true;
          this.isScroll = false;
        }
      } else {
        if (!this.isScroll) {
          this.isScroll = true;
          this.isScrollTop = false;
        }
      }
    }
  },
  /*
    此处要进行卸载滚动事件，因为是单页面应用，当点击购物车的时候，事件会跟随过去，所以需要在首页中把事件卸载掉，只在当前页面中应用
    不影响其他页面，而在keep-Alive缓存中，如果为true的情况下，单纯的使用destroyed是没有效果的，除非把keep-Alive变为false
    如果keep-Alive缓存为true的情况下，需要使用deactivated才可以，离开的时候触发,但是destroyed不要删除

    destorted:常用来销毁一些监听事件及定时函数
    
  */
    destoryed(){
        window.removeEventListener("scroll",this.eventScrollTop);
    },
    //在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等
    /*
        卸载掉当前的滚动事件之后，会出现进入其他页面回来之后上面的导航栏的滚动改变颜色效果没有了，是因为缓存了的原因，只需要
        在activated中重新进行触发一下就好了，注意：无论是activated还是deactivated都是在keep-alive中才有效，属于keep-alive
        特有的2个钩子函数
    */
    activated(){
        window.addEventListener("scroll", this.eventScrollTop);
    },
    //keep-Alive离开的时候进行触发
    deactivated(){
        window.removeEventListener("scroll",this.eventScrollTop);
    }
};
</script>

<style scoped>
@import "../../../assets/css/common/swiper.css"; 
.page {
  width: 100%;
  min-height: 100%;
  margin-bottom: 1.5rem;
}
.header {
  width: 100%;
  height: 1rem;
  position: fixed;
  z-index: 20;
  left: 0px;
  top: 0px;
  background: linear-gradient(rgba(1, 1, 1, 0.2), hsla(0, 0%, 100%, 0));
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 0.3rem;
  box-sizing: border-box;
}
.header.scroll {
  background: linear-gradient(#eb1625, hsla(0, 0%, 100%, 0));
}
.header .classify-icon {
  width: 0.6rem;
  height: 0.6rem;
  background-image: url("../../../assets/images/common/class.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.header .search-wrap {
  width: 5.26rem;
  height: 0.52rem;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.search-wrap .search-icon {
  width: 0.44rem;
  height: 0.44rem;
  background-image: url("../../../assets/images/common/search.png");
  background-size: 100%;
  background-repeat: no-repeat;
  margin-left: 0.2rem;
  margin-right: 0.2rem;
}
.search-wrap .text {
  font-size: 0.32rem;
  color: #fff;
}
.header .login {
  width: auto;
  height: 0.44rem;
  font-size: 0.32rem;
  color: #fff;
}
.header .my-icon {width: 0.6rem;height: 0.6rem;background-image: url("../../../assets/images/home/index/my.png");background-size: 100%;background-repeat: no-repeat;
                  background-position: center}
/* 轮播图 */
.banner-wrap {
  width: 100%;
  height: 3.66rem;
}
.banner-wrap img {
  width: 100%;
  height: 100%;
}
/* 导航区域 */
.quick-nav {
  width: 100%;
  height: 1.6rem;
  background-color: #fff;
  margin-top: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 0.2rem;
  box-sizing: border-box;
}
.quick-nav .item {
  width: 1.4rem;
}
.quick-nav .item li:nth-child(1) {
  width: 0.8rem;
  height: 0.8rem;
  margin: 0 auto;
}
.quick-nav .item li:nth-child(1) img {
  width: 100%;
  height: 100%;
}
.quick-nav .item li:nth-child(2) {
  font-size: 0.28rem;
  color: #7b7f82;
  text-align: center;
  margin-top: 0.2rem;
}
/* 潮流区域 */
.goods-main {
  width: 100%;
  height: 7.36rem;
  background-color: #fff;
  margin-top: 0.2rem;
}
.goods-main .classify-name {
  width: 100%;
  height: 0.64rem;
  border-bottom: 1px solid #efefef;
  font-size: 0.32rem;
  text-align: center;
  line-height: 0.64rem;
}
.goods-main .classify-name.color-0 {
  color: #f73b61;
}
.goods-main .classify-name.color-1 {
  color: #fe6719;
}
.goods-main .classify-name.color-2 {
  color: #5fc600;
}
.goods-main .goods-row-1 {
  width: 100%;
  height: 3.5rem;
  border-bottom: 1px solid #efefef;
  display: flex;
  overflow: hidden;
}
.goods-main .goods-row-1 .goods-column,
.goods-main .goods-row-1 .goods-column-2 {
  width: 50%;
  height: 100%;
  border-right: 1px solid #efefef;
  position: relative;
}
.goods-main .goods-row-1 .goods-column .goods-title {
  width: 95%;
  height: 0.32rem;
  overflow: hidden;
  position: absolute;
  left: 0.2rem;
  top: 0.2rem;
  font-size: 0.28rem;
  font-weight: bold;
}
.goods-main .goods-row-1 .goods-column .goods-tip {
  width: auto;
  height: auto;
  font-size: 0.28rem;
  color: #cb385d;
  position: absolute;
  left: 0.2rem;
  top: 0.6rem;
}
.goods-main .goods-row-1 .goods-column .goods-price {
  width: auto;
  height: 0.4rem;
  border-radius: 10px;
  position: absolute;
  right: 1rem;
  top: 0.6rem;
  color: #fff;
  font-size: 0.28rem;
}
.goods-main .goods-row-1 .goods-column .goods-price.bg-color-0 {
  background-color: #f21d4f;
}
.goods-main .goods-row-1 .goods-column .goods-price.bg-color-2 {
  background-color: #5fc600;
}
.goods-main .goods-row-1 .goods-column .goods-image {
  width: 3rem;
  height: 2rem;
  position: absolute;
  left: 0.35rem;
  bottom: 0.3rem;
}
.goods-main .goods-row-1 .goods-column .goods-image img {
  width: 100%;
  height: 100%;
}

.goods-main .goods-row-1 .goods-column-2 .goods-title {
  width: 95%;
  height: 0.32rem;
  overflow: hidden;
  font-size: 0.28rem;
  font-weight: bold;
  text-align: center;
  margin-top: 0.2rem;
}
.goods-main .goods-row-1 .goods-column-2 .goods-tip {
  width: auto;
  height: auto;
  font-size: 0.28rem;
  color: #7b7f82;
  text-align: center;
  margin-top: 0.1rem;
}
.goods-main .goods-row-1 .goods-column-2 .goods-image {
  width: 1.8rem;
  height: 2rem;
  margin: 0 auto;
  margin-top: 0.1rem;
}
.goods-main .goods-row-1 .goods-column-2 .goods-image img {
  width: 100%;
  height: 100%;
}

.goods-main .goods-row-1 .goods-column .goods-list {
  width: 100%;
  height: 50%;
  border-bottom: 1px solid #efefef;
  position: relative;
}
.goods-main .goods-row-1 .goods-column .goods-list-title {
  width: 2.04rem;
  height: 0.32rem;
  overflow: hidden;
  font-size: 0.28rem;
  font-weight: bold;
  position: absolute;
  left: 0.22rem;
  top: 0.2rem;
}
.goods-main .goods-row-1 .goods-column .goods-list-tip {
  width: auto;
  height: auto;
  font-size: 0.24rem;
  color: #7b7f82;
  position: absolute;
  left: 0.2rem;
  top: 0.6rem;
}
.goods-main .goods-row-1 .goods-column .goods-list-image {
  width: 1.2rem;
  height: 1.2rem;
  position: absolute;
  right: 0.2rem;
  top: 0.2rem;
}
.goods-main .goods-row-1 .goods-column .goods-list-image img {
  width: 100%;
  height: 100%;
}
.goods-main .goods-row-2 {
  width: 100%;
  height: 3.2rem;
  overflow: hidden;
  display: flex;
}
.goods-main .goods-row-2 .goods-list {
  width: 25%;
  height: 100%;
  border-right: 1px solid #efefef;
}
.goods-main .goods-row-2 .goods-title {
  width: 100%;
  height: 0.3rem;
  overflow: hidden;
  font-size: 0.28rem;
  font-weight: bold;
  text-align: center;
  margin-top: 0.2rem;
}
.goods-main .goods-row-2 .goods-image {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 auto;
  margin-top: 0.2rem;
}
.goods-main .goods-row-2 .goods-image img {
  width: 100%;
  height: 100%;
}
.goods-main .goods-row-2 .price {
  width: 100%;
  height: auto;
  text-align: center;
  font-size: 0.28rem;
  color: #d32a4e;
  margin-top: 0.1rem;
}
.goods-main .goods-row-2 .price.line {
  color: #7b7f82;
  text-decoration: line-through;
  margin-top: 0px;
}

/* 个人推荐 */
.goods-recom-nav {
  width: 100%;
  height: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.goods-recom-nav .line {
  width: 35%;
  height: 1px;
  background-color: #d4d4d4;
}
.goods-recom-nav .recom-wrap {
  width: 1.8rem;
  height: 0.44rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.goods-recom-nav .recom-wrap .icon {
  width: 0.4rem;
  height: 0.4rem;
  background-image: url("../../../assets/images/home/index/recom.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.goods-recom-nav .recom-wrap .text {
  width: auto;
  height: auto;
  font-size: 0.32rem;
  font-weight: bold;
}

.goods-recom {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0px 0.2rem;
  box-sizing: border-box;
  flex-wrap: wrap;
}
.goods-recom .goods-list {
  width: 48%;
  height: 4.5rem;
  background-color: #fff;
  margin-top: 0.2rem;
}
.goods-recom .goods-list .goods-image {
  width: 2.8rem;
  height: 2.8rem;
  margin: 0 auto;
  margin-top: 0.2rem;
}
.goods-recom .goods-list .goods-image img {
  width: 100%;
  height: 100%;
}
.goods-recom .goods-list .goods-title {
  width: 100%;
  height: 0.8rem;
  overflow: hidden;
  font-size: 0.28rem;
  margin-top: 0.1rem;
}
.goods-recom .goods-list .goods-price {
  width: auto;
  height: auto;
  font-size: 0.28rem;
  color: #d32a4e;
}
</style>